<template>
  <div style="width: 99%; margin-left: 0.5%; padding: 20px; background-color: white;">
    <!-- 第一行：始终显示 -->
    <div style="display: flex; flex-wrap: wrap; align-items: center; gap: 5px;">  <!-- 行距改为5px -->
      <el-form-item label="单据编号：" prop="name" style="margin-bottom: 0;">
        <el-input placeholder="请输入" style="width: 305px;" />
      </el-form-item>
      
      <el-form-item label="单据日期：" style="margin-bottom: 0;">
        <div style="display: flex; align-items: center; gap: 5px;">  <!-- 日期选择器间距改为5px -->
          <el-date-picker
            type="date"
            placeholder="请选择开始日期"
            style="width: 278px;"
          />
          <span>~</span>
          <el-date-picker
            type="date"
            placeholder="请选择结束日期"
            style="width: 278px;"
          />
        </div>
      </el-form-item>
      
      <!-- 收起状态下显示的按钮 -->
      <div v-if="!isExpanded" style="display: flex; align-items: center; gap: 5px;">  <!-- 按钮间距改为5px -->
        <el-button type="primary" :icon="Search" style="width: 82px;">查询</el-button>
        <el-button :icon="RefreshRight" style="width: 82px;">重置</el-button>
        <el-button type="primary" link @click="toggleExpand">展开 V</el-button>
      </div>
      
      <el-form-item label="单据主题：" prop="name" style="margin-bottom: 0;" v-if="isExpanded">
        <el-input placeholder="请输入" style="width: 305px;" />
      </el-form-item>
    </div>
    
    <!-- 第二行：展开时显示的内容 -->
    <div v-if="isExpanded" style="display: flex; flex-wrap: wrap; align-items: center; gap: 5px; margin-top: 5px;">  <!-- 行距和上边距改为5px -->
      <el-form-item label="供应商：" prop="name" style="margin-bottom: 0;">
        <el-select v-model="value" placeholder="请选择" style="width: 318px;" class="custom-select">
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </el-form-item>
      
      <el-form-item label="单据阶段：" prop="name" style="margin-bottom: 0;">
        <el-select v-model="value" style="width: 170px;" class="custom-select">
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </el-form-item>
      
      <el-form-item label="已生效：" prop="name" style="margin-bottom: 0;">
        <el-select v-model="value" style="width: 116px;" class="custom-select">
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </el-form-item>
      
      <el-form-item label="已关闭：" prop="name" style="margin-bottom: 0;">
        <el-select v-model="value" style="width: 183px;" class="custom-select">
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </el-form-item>
      
      <el-form-item label="已作废：" prop="name" style="margin-bottom: 0;">
        <el-select v-model="value" style="width: 184px;" class="custom-select">
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </el-form-item>
    </div>
    
    <!-- 展开状态下显示的按钮 -->
    <div v-if="isExpanded" style="display: flex; align-items: center; gap: 5px; margin-top: 5px;">  <!-- 按钮间距和上边距改为5px -->
      <el-button type="primary" :icon="Search" style="width: 82px;">查询</el-button>
      <el-button :icon="RefreshRight" style="width: 82px;">重置</el-button>
      <el-button type="primary" link @click="toggleExpand">收起 ∧</el-button>
    </div>
    <br>
    <el-button type="primary" :icon="Download" link>导出</el-button>
    <el-table
    ref="singleTableRef"
    :data="tableData"
    highlight-current-row
    style="width: 100%"
    @current-change="handleCurrentChange"
    border
    :header-cell-style="{background: '#f5f7fa', color: '#606266'}" 
  >
    <el-table-column label="#" type="index" width="50" />
    <el-table-column property="date" label="单据编号" width="120" sortable />
    <el-table-column property="name" label="单据日期" width="120" sortable />
    <el-table-column property="address" label="单据主题" sortable />
    <el-table-column property="address" label="源单号" sortable />
    <el-table-column property="address" label="供应商" sortable />
    <el-table-column property="address" label="业务部门" sortable />
    <el-table-column property="address" label="业务员" sortable />
    <el-table-column property="address" label="金额" sortable />
    <el-table-column property="address" label="已核销金额" sortable />
    <el-table-column property="address" label="单据阶段" sortable />
    <el-table-column property="address" label="已生效" sortable />
    <el-table-column property="address" label="已关闭" sortable />
    <el-table-column property="address" label="已作废" sortable />
    <el-table-column property="address" label="自动单据" sortable />
    <el-table-column property="address" label="红字单据" sortable />
    <el-table-column property="address" label="备注" sortable />
    <el-table-column property="address" label="生效时间" sortable />
    <el-table-column property="address" label="核批人" sortable />
    <el-table-column property="address" label="制单时间" sortable />
    <el-table-column property="address" label="制单人" sortable />
    <el-table-column property="address" label="制单部门" sortable />
    <el-table-column property="address" label="修改时间" sortable />
    <el-table-column property="address" label="修改人" sortable />
  </el-table>
  
<el-button :icon="RefreshRight" style="width: 82px;" @click="fetchData()">调接口我操</el-button>

  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, watch, computed } from 'vue';
import { Search, RefreshRight, Download } from '@element-plus/icons-vue';
import { getPayableList } from '../../../api/payee/meet/meet.js';

const isExpanded = ref(false);
const toggleExpand = () => {
  isExpanded.value = !isExpanded.value;
};

const options = ref([
  { value: '1', label: '选项1' },
  { value: '2', label: '选项2' },
  { value: '3', label: '选项3' },
]);

const value = ref('');

import type { TableInstance } from 'element-plus'
import { mount } from 'sortablejs';

interface User {
  date: string
  name: string
  address: string
}

const currentRow = ref()
const singleTableRef = ref<TableInstance>()

const setCurrent = (row?: User) => {
  singleTableRef.value!.setCurrentRow(row)
}
const handleCurrentChange = (val: User | undefined) => {
  currentRow.value = val
}
const tableData: User[] = []

const fetchData = async () => {
  try {
    const response = await getPayableList();
    console.log('响应数据:', response.data);
  } catch (rawError) {
    // 标准化错误对象
    // const error = {
    //   name: rawError.name || 'ApiError',
    //   message: rawError.message || 'Unknown Error',
    //   stack: rawError.stack,
    //   config: rawError.config,
    //   response: {
    //     status: rawError.response?.status,
    //     data: rawError.response?.data,
    //     headers: rawError.response?.headers
    //   }
    // };
    // console.error('完整错误报告:', JSON.stringify(error, null, 2));
  }
};

onMounted(() => {
  fetchData()
})

</script>

<style scoped>
/* 统一设置表单元素高度 */
:deep(.el-input),
:deep(.el-date-editor),
:deep(.el-select) {
  height: 32px;
}

:deep(.el-input__inner),
:deep(.el-date-editor .el-input__inner),
:deep(.el-select .el-input__inner) {
  height: 32px;
  line-height: 32px;
}

/* 调整表单标签样式 */
:deep(.el-form-item__label) {
  line-height: 32px;
}

/* 按钮样式调整 */
.el-button {
  height: 32px;
  padding: 0 12px;
}


.el-table {
  border: 1px solid #ebeef5;  /* 外边框 */
}

.el-table th {
  background-color: #f5f7fa !important;  /* 表头背景色 */
}

.el-table--border th, 
.el-table--border td {
  border-right: 1px solid #ebeef5;  /* 单元格右边框 */
}

.el-table--border {
  border: 1px solid #ebeef5;  /* 表格外边框 */
  border-bottom: 1px solid #ebeef5;  /* 表格底部边框 */
}

.el-table--border::after, 
.el-table--group::after {
  border-right: 1px solid #ebeef5;  /* 表格右边框 */
}

.el-table--border th.gutter:last-of-type {
  border-right: 1px solid #ebeef5;  /* 最后一列的右边框 */
}
</style>